import React from 'react';
import { Flex } from '@/components/flex';
import * as UI from './ui';
import * as hooks from './hooks';
import { PageController } from './page-controller';

export default function ServicesDetail() {
    return (
        <Body />
    );
}

function Body() {

    const pageController = React.useMemo(() => new PageController(), []);
    const { id } = hooks.useSearch();

    React.useEffect(() => {
        pageController.setId(id);
        pageController.query();
    }, [id, pageController]);

    return (
        <PageController.Context.Provider value={pageController}>
            <Flex vertical style={{ backgroundColor: '#f5f5f5', height: '100vh' }}>
                <UI.Header />
                <Flex vertical style={{ padding: '16px', overflow: 'auto', flex: 1, width: "100%", alignItems: 'normal' }} gap={16}>
                    <UI.BasicInfo />
                    {/* <UI.ServiceDetails /> */}
                    <UI.Statistics />
                    <UI.UsageHistory />
                </Flex>
            </Flex>
        </PageController.Context.Provider>
    )
} 